<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>支付</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="/css/iconfont/iconfont.css" rel="stylesheet"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="/css/cart.css" rel="stylesheet"/>
    <style>
        .order-info .pay-type h3{
            margin: 30px 0px 20px;
        }

        .order-info .pay-type input[type="password"]{
            width: 0px;
            outline-style: none;
            border: 0px;
        }
        .order-info .pay-type input[type="submit"]{
            outline-style: none;
            width: 223px;
            border: 1px solid #FF6700;
            padding: 0px 30px;
            font-size: 14px;
            margin-right: 20px;
            width: 100px;
            height: 48px;
            line-height: 48px;
            background-color: #FF6700;
            color: #FFF;
        }
        .order-info .pay-type input[type="submit"]:hover{
            background-color: #F25807;
        }
        .order-info .pay-type .paypwd{
            display: inline-block;
            height: 52px;
            line-height: 52px;
        }
        .order-info .pay-type .paypwd ul{
            display: inline;
            height: 52px;
        }
        .order-info .pay-type .paypwd ul li{
            display: inline;
            height: 48px;
            width: 48px;
            margin: 0px;
            border-right: 0px;
            border-color: #E0E0E0;
            line-height: 48px;
            font-size: 28px;
            position: relative;
        }
        @keyframes pwd-focus{
            0%		{background-color: #616161;}
            50%		{background-color: #FFF;}
            100%	{background-color: #616161;}
        }
        .order-info .pay-type .paypwd ul .b::after{
            content: "";
            display: block;
            width: 1px;
            height: 28px;
            background-color: #616161;
            position: absolute;
            top: 10px;
            left: 23px;
            animation:pwd-focus 0.8s linear 0.5s infinite alternate;
        }
        .order-info .pay-type .paypwd ul li:nth-child(6n){
            border-right: 1px solid #E0E0E0;
        }

        .order-info .pay-type ul::after{
            content: "";
            display: block;
            clear: both;
        }
        .order-info .pay-type li{
            float: left;
            width: 174px;
            height: 60px;
            line-height: 60px;
            margin-right: 14px;
            margin-bottom: 14px;
            border: 1px solid #e0e0e0;
            text-align: center;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s;
        }
        .order-info .pay-type li:nth-child(6n){
            margin-right: 0px;
        }
        .order-info .pay-type li:hover{
            border-color: #FF6700;
        }
    </style>
</head>
<body class="graybg-theme">
<!--头部-->
<th:block th:include="header"/>
<div class="cart-header wrapper">
    <div class="logo">
        <a href="../index.html"><img src="/img/logo.png" alt="logo"/></a>
    </div>
    <div class="step-box">
        <div class="row">
            <div class="step first active col-3">
                <span class="num">1</span><span class="line"></span><span class="label">我的购物车</span>
            </div>
            <div class="step active col-3">
                <span class="num">2</span><span class="line"></span><span class="label">确认订单信息</span>
            </div>
            <div class="step active col-3">
                <span class="num">3</span><span class="line"></span><span class="label">选择支付方式</span>
            </div>
            <div class="step last col-3">
                <span class="num">4</span><span class="line"></span><span class="label">完成付款</span>
            </div>
        </div>
    </div>
</div>
<!--头部-->

<div class="wrapper">
    <div class="pay-wrap">
        <div class="order-result">
            <div class="section clearfix">
                <img src="/img/ico/order-success.jpg" class="ico"/>
                    <div class="titbox">
                        <div class="tit">订单提交成功，应付金额 <span class="prices"></span>元</div>
                        <div class="stit">订单号：<span class="order1"></span>   请您在 1 日 内完成支付，否则订单会被自动取消</div>
                    </div>
                    <div class="mt20">
                        <div class="meta">
                            <div class="hd">收货地址</div>
                            <div class="bd"><span class="addr"></span><a href="">[修改]</a></div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
    <div class="pay-wrap-tit">
        在线支付
    </div>
    <div class="pay-wrap order-info">
        <div class="pay-type">
            <h3>账户余额</h3>
            <form action="" method="post" id="pay">
                <input type="hidden" name="id" th:value="${param.id}"/>
                <input type="password" name="paypwd" id="paypwd" placeholder="支付密码" maxlength="6"/>
                <label for="paypwd" class="paypwd">&nbsp;
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </label>
                <input type="submit" value="付款" />
            </form>
        </div>
        <div class="pay-way">
            <div class="row">
                <div class="col col-3">
                    <label><input class="check" type="radio" name="a"/><img src="/img/pay/zfb.jpg"/></label>
                </div>
                <div class="col col-3">
                    <label><input class="check" type="radio" name="a"/><img src="/img/pay/weixin.jpg"/></label>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-panel">
        <a href="" class="go-next ui-btn-theme">下一步</a>
    </div>
</div>

<!--脚部-->
<div class="fatfooter">

</div>
<!--脚部-->
</body>
<script src="/js/jquery.js" th:href="@{/js/jquery.js}"></script>
<link rel="stylesheet" href="/js/icheck/style.css"/>
<script src="/js/icheck/icheck.min.js"></script>
<script src="/js/global.js"></script>
<script th:src="@{/js/ajax.js}"></script>
<script th:src="@{/js/pay.js}"></script>
<script>
    $('.check').iCheck({
        radioClass: 'sty1-radio'
    });
    loadOrder('[[${param.id}]]');
</script>
</html>